<template>
  <div class="full relative" ref="videoBox">
    <video class="w_full h_full-45 border_radius_10" v-show="showFlv" autoplay controls id="videoElement" ref="videoDom"></video>


    <!-- 监控列表 -->
    <div class="full absolute top_0 left_0 z_999">
      <div 
        class="w_full h_full-50 flex_wrap flex_row_around flex_center scroll_box overflow_y_auto bgc_212121" 
        v-if="videoList && videoList.length && !showFlv"
      >
        <!-- <div class="w_33_p cursor p_3 main_border" v-if="sourceList[0].pic == null">
          <div class="w_full h_full-30">
            <play-video-sec :videoUrl="sourceList[0].url" />
          </div>

          <div class="w_full h_30 lh_30 bgc_05050680 color_fff text_center">运行监控</div>
        </div> -->

        <div 
          class="w_33_p cursor p_3 sub_border border_radius_5 mb_2" 
          v-for="(item, index) in videoList" :key="index" 
          @click="playFLV(item)"
        >
          <img class="w_full" :src="item.pic" alt="">
          <div class="w_full h_30 lh_30 bgc_05050680 color_fff text_center">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 全屏 -->
    <div class="w_full h_40 lh_40 absolute bottom_10 left_5 z_999">
      <div 
        class="w_80 h_30 lh_30 cursor text_center absolute top_15 left_0" 
        :class="[activeBtn == 'all' ? 'main_btn' : 'sub_btn']" @click="clickBtn('all')">全部</div>
      <div 
        class="w_80 h_30 lh_30 cursor text_center absolute top_15 left_100" 
        :class="[activeBtn == '1' ? 'main_btn' : 'sub_btn']" @click="clickBtn('1')">通道1</div>
      <div 
        class="w_80 h_30 lh_30 cursor text_center absolute top_15 left_200" 
        :class="[activeBtn == '2' ? 'main_btn' : 'sub_btn']" @click="clickBtn('2')">通道2</div>
      <div 
        class="w_80 h_30 lh_30 cursor text_center absolute top_15 left_300" 
        :class="[activeBtn == '3' ? 'main_btn' : 'sub_btn']" @click="clickBtn('3')">通道3</div>
      <div 
        class="w_80 h_30 lh_30 cursor text_center absolute top_15 left_400" 
        :class="[activeBtn == '4' ? 'main_btn' : 'sub_btn']" @click="clickBtn('4')">通道4</div>
      <div 
        class="w_80 h_30 lh_30 cursor text_center absolute top_15 left_500" 
        :class="[activeBtn == '5' ? 'main_btn' : 'sub_btn']" @click="clickBtn('5')">装料</div>


      <div class="w_25 h_25 absolute bottom_5 right_5 z_999">
        <img 
          class="full cursor" 
          v-if="isFullscreen" 
          src="../assets/images/icon/suo-xiao.png" 
          alt="" 
          @click="fullScreen()"
        >

        <img class="full cursor" v-if="!isFullscreen" src="../assets/images/icon/fang-da.png" alt="" @click="fullScreen()">
      </div>
    </div>

  </div>
</template>

<script>
  import screenfull from 'screenfull'
  import flvjs from 'flv.js'

  import { 
    getSuriToken,
    getSuriCameraList,
    stopSuriMonitor
  } from '@/config/api.js'

  

  export default {
    name: 'PlayVideo',
    props: {
      sentBtn: ''
    },
    data() {
      return {
        // suri 监控 token
        suriToken: '',
        suriCameraList: [],



        isFullscreen: false,
        showFlv: false,

        activeBtn: 'all',

        // 全部监控
        allVideoList: [
          // 饲草库
          { name: '饲草库1', pic: require('../assets/images/monitors/sck1.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000017.live.flv',
            channelId: '34020000001310000017'
          },
          { name: '饲草库2', pic: require('../assets/images/monitors/sck2.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000016.live.flv',
            channelId: '34020000001310000016'
          },
          { name: '饲草库3', pic: require('../assets/images/monitors/sck3.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000015.live.flv',
            channelId: '34020000001310000015'
          },
          { name: '饲草库4', pic: require('../assets/images/monitors/sck4.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000007.live.flv',
            channelId: '34020000001310000007'
          },
          { name: '棚外', pic: require('../assets/images/monitors/peng-wai.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000021.live.flv',
            channelId: '34020000001310000021'
          },

          // 右侧
          { name: '羊床1', pic: require('../assets/images/monitors/1.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000001.live.flv',
            channelId: '34020000001310000001'
          },
          { name: '羊床2', pic: require('../assets/images/monitors/2.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000002.live.flv',
            channelId: '34020000001310000002'
          },
          { name: '羊床3', pic: require('../assets/images/monitors/3.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000003.live.flv',
            channelId: '34020000001310000003'
          },
          { name: '羊床4', pic: require('../assets/images/monitors/4.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000004.live.flv',
            channelId: '34020000001310000004'
          },
          { name: '羊床5', pic: require('../assets/images/monitors/5.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000005.live.flv',
            channelId: '34020000001310000005'
          },
          { name: '羊床6', pic: require('../assets/images/monitors/6.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000006.live.flv',
            channelId: '34020000001310000006'
          },
          { name: '羊床8', pic: require('../assets/images/monitors/8.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000008.live.flv',
            channelId: '34020000001310000008'
          },
          { name: '羊床9', pic: require('../assets/images/monitors/9.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000009.live.flv',
            channelId: '34020000001310000009'
          },
          { name: '羊床10', pic: require('../assets/images/monitors/10.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000010.live.flv',
            channelId: '34020000001310000010'
          },
          { name: '羊床11', pic: require('../assets/images/monitors/11.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000011.live.flv',
            channelId: '34020000001310000011'
          },
          { name: '羊床12', pic: require('../assets/images/monitors/12.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000012.live.flv',
            channelId: '34020000001310000012'
          },
          { name: '羊床13', pic: require('../assets/images/monitors/13.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000013.live.flv',
            channelId: '34020000001310000013'
          },
          { name: '羊床14', pic: require('../assets/images/monitors/14.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000014.live.flv',
            channelId: '34020000001310000014'
          },
          { name: '羊床18', pic: require('../assets/images/monitors/18.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000018.live.flv',
            channelId: '34020000001310000018'
          },
          { name: '羊床19', pic: require('../assets/images/monitors/19.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000019.live.flv',
            channelId: '34020000001310000019'
          },
          { name: '羊床20', pic: require('../assets/images/monitors/20.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000020.live.flv',
            channelId: '34020000001310000020'
          },
        ],

        SLCTongDao1Monitors: [
          // 右侧
          { name: '羊床12', pic: require('../assets/images/monitors/12.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000012.live.flv',
            channelId: '34020000001310000012'
          },
          { name: '羊床13', pic: require('../assets/images/monitors/13.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000013.live.flv',
            channelId: '34020000001310000013'
          },
          { name: '羊床14', pic: require('../assets/images/monitors/14.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000014.live.flv',
            channelId: '34020000001310000014'
          },
          { name: '羊床18', pic: require('../assets/images/monitors/18.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000018.live.flv',
            channelId: '34020000001310000018'
          },
          { name: '羊床19', pic: require('../assets/images/monitors/19.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000019.live.flv',
            channelId: '34020000001310000019'
          },
          { name: '羊床20', pic: require('../assets/images/monitors/20.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000020.live.flv',
            channelId: '34020000001310000020'
          },
        ],
        SLCTongDao2Monitors: [
          // 左侧
          { name: '羊床5', pic: require('../assets/images/monitors/5.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000005.live.flv',
            channelId: '34020000001310000005'
          },
          { name: '羊床6', pic: require('../assets/images/monitors/6.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000006.live.flv',
            channelId: '34020000001310000006'
          },
          { name: '羊床8', pic: require('../assets/images/monitors/8.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000008.live.flv',
            channelId: '34020000001310000008'
          },
          { name: '羊床9', pic: require('../assets/images/monitors/9.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000009.live.flv',
            channelId: '34020000001310000009'
          },
          { name: '羊床10', pic: require('../assets/images/monitors/10.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000010.live.flv',
            channelId: '34020000001310000010'
          },
          { name: '羊床11', pic: require('../assets/images/monitors/11.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000011.live.flv',
            channelId: '34020000001310000011'
          }
        ],
        SLCTongDao3Monitors: [
          { name: '羊床1', pic: require('../assets/images/monitors/1.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000001.live.flv',
            channelId: '34020000001310000001'
          },
          { name: '羊床2', pic: require('../assets/images/monitors/2.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000002.live.flv',
            channelId: '34020000001310000002'
          },
          { name: '羊床3', pic: require('../assets/images/monitors/3.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000003.live.flv',
            channelId: '34020000001310000003'
          },
          { name: '羊床4', pic: require('../assets/images/monitors/4.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000004.live.flv',
            channelId: '34020000001310000004'
          },
          { name: '羊床5', pic: require('../assets/images/monitors/5.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000005.live.flv',
            channelId: '34020000001310000005'
          },
          { name: '羊床6', pic: require('../assets/images/monitors/6.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000006.live.flv',
            channelId: '34020000001310000006'
          },
        ],
        SLCTongDao4Monitors: [
          { name: '羊床11', pic: require('../assets/images/monitors/11.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000011.live.flv',
            channelId: '34020000001310000011'
          },
          { name: '羊床12', pic: require('../assets/images/monitors/12.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000012.live.flv',
            channelId: '34020000001310000012'
          },
          { name: '羊床13', pic: require('../assets/images/monitors/13.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000013.live.flv',
            channelId: '34020000001310000013'
          },
          { name: '羊床18', pic: require('../assets/images/monitors/18.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000018.live.flv',
            channelId: '34020000001310000018'
          },
          { name: '羊床19', pic: require('../assets/images/monitors/19.png'),   
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000019.live.flv',
            channelId: '34020000001310000019'
          },
          { name: '羊床20', pic: require('../assets/images/monitors/20.png'),
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000020.live.flv',
            channelId: '34020000001310000020'
          }
        ],

        si_cao_ku_monitors: [
          { name: '饲草库1', pic: require('../assets/images/monitors/sck1.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000017.live.flv',
          },
          { name: 
            '饲草库2', pic: require('../assets/images/monitors/sck2.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000016.live.flv',
          },
          { name: '饲草库3', pic: require('../assets/images/monitors/sck3.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000015.live.flv',
            mp4: '' 
          },
          { name: '饲草库4', pic: require('../assets/images/monitors/sck4.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000007.live.flv',
          },
          { name: '棚外', pic: require('../assets/images/monitors/peng-wai.png'), 
            url: 'http://8.130.104.179:8092/rtp/34020000001110000001_34020000001310000021.live.flv',
          }
        ],

        videoList: [],

        flvPlayer: null,
        activeMonitor: null
      }
    },

    watch: {
      // sentBtn: {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       this.activeBtn = newVal

      //       this.clickBtn(newVal)
      //     }
      //   }
      // }
    },

    mounted() { 
      this.getSuriToken()

      this.activeBtn = 'all'
      this.videoList = this.allVideoList
    },

    beforeDestroy() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.destroy();
        this.flvPlayer = null
      }
    },


    methods: {
      // 全屏
      fullScreen() {
        // const element = document.getElementById('Echart');//指定全屏区域元素

        let element = this.$refs.videoBox
        // 先使用screenfull.enabled方法判断是否支持screenfull

        // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
       if (!screenfull.isEnabled) {
          this.$message({
            message:'浏览器不能全屏，安装其他版本试试',
            type:'warning'
          })

          return false
        }
        
        this.isFullscreen = !this.isFullscreen
        
        screenfull.request(element)

        // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
        screenfull.toggle()
      },


      // 播放 flv 监控
      playFLV(item) {
        this.activeMonitor = item
        // console.log('this.flvPlayer  1 : ', this.flvPlayer);

        if (this.flvPlayer) {
          this.flvPlayer.pause();
          this.flvPlayer.unload();
          this.flvPlayer.destroy();
          this.flvPlayer = null
          // this.flvPlayer.destroy();
        }

        // console.log('this.flvPlayer  2 : ', this.flvPlayer);

        this.showFlv = true

        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: item.url
        });

        var videoElement = document.getElementById('videoElement');

        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
      },

      // 点击按钮切换监控list
      clickBtn(val) {
        if (this.flvPlayer) {
          this.flvPlayer.pause();
          this.flvPlayer.unload();
          this.flvPlayer.destroy();
          this.flvPlayer = null

          // this.flvPlayer.detachMediaElement();
          
          // 暂停监控播放
          this.stopSuriMonitor(this.activeMonitor.channelId, this.suriToken)
        }

        this.showFlv = false

        this.activeBtn = val

        if (val == 'all') {
          this.videoList = this.allVideoList
        } else if (val == '1') {
          this.videoList = this.SLCTongDao1Monitors
        } else if (val == '2') {
          this.videoList = this.SLCTongDao2Monitors
        } else if (val == '3') {
          this.videoList = this.SLCTongDao3Monitors
        } else if (val == '4') {
          this.videoList = this.SLCTongDao4Monitors
        } else if (val == '5') {
          this.videoList = this.si_cao_ku_monitors
        }
      },

      // 获取 suri token
      async getSuriToken() {
        let res = await getSuriToken({
          username: 'admin',
          password: 'admin123'
        })
        try {
          if (res.code == 200) {
            this.suriToken = res.token
          }
        } catch(err) {
          console.log('获取 suri 监控后台 token 失败 : ', err);
        }
      },

      // 获取 suri camera 监控列表
      async getSuriCameraList(token) {
        let params = {
          pageNum: 1,
          pageSize: 40,
          deviceId: '34020000001110000001',
          query: 'Camera'
        }
        let res = await getSuriCameraList(params, token)
        try {
          if (res.code == 200) {
            this.suriCameraList = res.rows.forEach(item => {
              item.name == 'Camera 01'
            })
          }
        } catch(err) {
          console.log('获取 suri camera 监控列表 失败 : ', err);
        }
      },

      // 暂停 suri 监控播放
      async stopSuriMonitor(channelId, token) {
        let params = {
          deviceId: '34020000001110000001',
          channelId: channelId,
        }
        let res = await stopSuriMonitor(params, token)
        try {
          if (res.code == 200) {
            console.log('暂停监控成功 : ', res);
          }
        } catch(err) {
          Message({
            message: '暂停监控失败',
            type: 'error',
            duration: 2 * 1000
          })

          console.log('暂停监控失败 : ', err);
        }
      },

    }
  }


</script>

<style scoped lang="less">
.activeBtn { color: red; }

.video_box {
  width: 100%;
  height: 100%;
  position: relative;
  // border: 1px solid red;

  .video_view { width: 100%; height: calc(100% - 55px); border-radius: 10px !important; }

  .m3u8_box {
    width: 100%;
    height: 100%;
  }

  .btn_box {
    padding: 0 5px;
    position: absolute;
    bottom: 5px;
    left: 0px;
    font-size: 20px;

    .choose_btn {
      padding: 5px 10px;
      border: none;
      border-radius: 3px; 
      background-color: #000000c2;
      color: #bdaa9c;
    }
    .choose_btn:hover { cursor: pointer; }
  }

  .videoListBox {
    width: 50%;
    height: 90%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #eee;
    background-color: rgba(#212121, 0.8);
    color: #fff;
    border-radius: 5px;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;

    .video_item {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .video_item:hover { cursor: pointer; }
  }
}
</style>

<style>
.el-tabs__item { color: #fff !important; text-align: center !important; }
.el-tabs__item.is-active { color: #409eff !important; }
</style>

